<!--  -->
<template>
  <div class='identityQuery'>
    <!--        头部-->
    <head-top></head-top>
    <div style="width: 100%;height: 150px;"></div>
    <div class="search">
      <div class="searchpd">
        <img src="../../assets/img/search.png">
        <input v-model="wxPhone" placeholder="请输入微信号/QQ号"/>
        <p @click="search">查询</p>
      </div>
    </div>
    <div class="messageCon" v-if="messageCon">
      <div class="tem">
        <div class="img"><img :src="avatar"/></div>
        <div class="number"><span>{{weixin}}</span></div>
        <ul>
          <li>
            <div class="lis">
              <p>身份</p>
              <p>{{identify}}</p>
            </div>
          </li>
          <li>
            <div class="lis">
              <p>昵称</p>
              <p>{{nickName}}</p>
            </div>
          </li>
          <li>
            <div class="lis">
              <p>所属</p>
              <p>{{groupName}}</p>
            </div>
          </li>
          <li>
            <div class="lis">
              <p>微信号</p>
              <p>{{weixin}}</p>
            </div>
          </li>
          <li>
            <div class="lis">
              <p>QQ号</p>
              <p>{{qq}}</p>
            </div>
          </li>
          <li>
            <div class="lis">
              <p>加入时间</p>
              <p>{{createTime}}</p>
            </div>
          </li>
          <li>
            <div class="lis">
              <p>查询时间</p>
              <p>{{queryTime}}</p>
            </div>
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import headTop from "../../components/base/headTop.vue"
import userApi from '@/api/user'
export default {
//import引入的组件需要注入到对象中才能使用
  components: {
    headTop
  },
  data() {

    return {
      messageCon:false,
      wxPhone:'',
      createTime: "",
      identify: "",
      groupName: "",
      weixin: "",
      qq: "",
      nickName: "",
      queryTime: "",
      avatar: ""
    };
  },
//监听属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},

  methods: {
    search(){
      userApi.queryIdentify({username:this.wxPhone}).then(data=>{
        console.log(22)
        console.log(data.data.record)
                this.createTime= data.data.record.createTime
                this.identify=data.data.record.identify
                this.groupName= data.data.record.groupName
                this.weixin= data.data.record.weixin
                this.qq= data.data.record.qq
                this.nickName= data.data.record.nickName
                this.queryTime=data.data.record.queryTime
                this.avatar=data.data.record.avatar
        if(data.data.record){
          this.messageCon =true
        }else {
          this.messageCon =false
          this.$toast('该用户不存在')
        }
      })
    }
  },

  created() {
    window.localStorage.setItem('name','身份查询')
  },

  mounted() {

  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
  .identityQuery{
    width: 100%;
    min-height: 100%;
    background: url("../../assets/img/identityBg.jpg") no-repeat center center;
    background-size: 100% 100%;

  }
  .search{
    width: 100%;
    background: white;
    position: fixed;
    top: 51px;
    left: 0;
    .searchpd{
      padding: 10px;
      display: flex;
      align-items: center;
      position: relative;
      img{
        width: 15px;
        height: 15px;
        position: absolute;
        top: 50%;
        margin-top: -7.5px;
        left: 20px;
      }
      input{
        flex: 1;
        text-indent: 35px;
        background: #f4f4f4;
        border-radius: 5px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .messageCon{
    width: 100%;
    .tem{
      padding: 10px;

      .img{
        width: 40px;
        height: 40px;
        margin: 0 auto;
        img{
          width: 40px;
          height: 40px;
        }
      }
      .number{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        span{
          display: inline-block;
          padding: 5px 10px;
          background: #508dc6;
          color: red;
          border-radius: 5px;
        }
      }
      ul{
        width: 100%;
        li{
          border-bottom: 2px solid #cfaa4d;
          margin-top: 10px;
          .lis{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
          }
        }
      }

    }
  }
</style>
